<template>
	<view>
		<view class="row j-sa border-bottom" style="position:fixed;width:750upx;height:92upx;background-color:#FFFFFF;z-index:1;">
			<view class="p-2" @tap="activeTab(-1,0)" :class="{active_red:active == -1}" >
				推荐
			</view>
			<block v-for="(item,index) in news" :key="index">
				<view class="p-2" @tap="activeTab(index,item.id)" :class="{active_red:active == index}" >
					{{item.title}}
				</view>
			</block>
		</view>
		<view style="height:92upx;"></view>
		<view v-if="!flag">
			<block v-for="(item,index) in newsList" :key="index">
				<view class="p-3 border-bottom row j-sb" @tap="detail(item.id)">
					<view class="row flex-column" style="width: 413upx;">
						<text class="font-md font-weight-6">{{item.title}}</text>
						<text class="font-sm" style="color: #C8C7CC;">{{item.autor}} {{item.time}}</text>
					</view>
					<image :src="baseUrl+item.img" style="width: 220upx;height: 152upx;border-radius: 10rpx;"></image>
				</view>
			</block>
		</view>
		<view v-if="flag">
			<view style="width:100%;margin: 50rpx 0 100rpx;text-align: center;">
				<image src="../../static/nocontent.png" mode="" style="width: 243rpx;height: 200rpx;"></image>
				<view style="color: #999;">
					暂无内容
				</view>
			</view>
		</view>
		<!-- <view class="row j-center p-3">
			<button @click="more()" size="mini" type="default">加载更多</button>
		</view> -->
		
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				page:1,
				baseUrl:request.common.baseUrl,
				news:[],
				active:-1,
				newsList:[],
				category_id:1,
				flag: true
			}
		},
		onLoad:function(){
			uni.request({
			    url: request.common.baseUrl+'/api/index/informationCategory',
			    data: {},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
			        if(res.data.code==200){
						this.news=res.data.data
						uni.request({
						    url: request.common.baseUrl+'/api/index/informations',
						    data: {
								page:this.page,
								category_id:this.category_id
							},
						    header: {
								'Content-Type':'application/json;charset=UTF-8',
								'Content-Type':'application/x-www-form-urlencoded'
						    },
						    success: (res) => {
						        if(res.data.code==200){
									this.newsList=res.data.data
								}
								if(this.newsList.length == 0){
									this.flag = true
								}else {
									this.flag = false
								}
						    }
						});
					}
			    }
			});
		},
		onReachBottom() {
			this.page += 1;
			uni.request({
			    url: request.common.baseUrl+'/api/index/informations',
			    data: {
					page:this.page,
					category_id:this.category_id
				},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
					this.newsList=[]
			        if(res.data.code==200){
						this.newsList.push(...res.data.data)
					}else{
						uni.showToast({
						    title: '暂无数据',
							icon: 'none',
						    duration: 2000
						});
					}
			    }
			});
		},
		methods: {
			activeTab(index,id){
				this.active = index;
				this.page=1;
				this.category_id=id;
				uni.request({
				    url: request.common.baseUrl+'/api/index/informations',
				    data: {
						page:this.page,
						category_id:id
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
						this.newsList=[]
				        if(res.data.code==200){
							this.newsList=res.data.data
						}
						if(this.newsList.length == 0){
							this.flag = true
						}else {
							this.flag = false
						}
				    }
				});
			},
			more(){
				this.page=this.page+1
				uni.request({
				    url: request.common.baseUrl+'/api/index/informations',
				    data: {
						page:this.page,
						category_id:this.category_id
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
				        if(res.data.code==200){
							for (var j = 0; j < res.data.data.length; j++) {
								this.newsList.push(res.data.data[j])
							}
						}else{
							uni.showToast({
							    title: '暂无数据',
								icon: 'none',
							    duration: 2000
							});
						}
				    }
				});
			},
			detail(id){
				uni.navigateTo({
					url: '/pages/counsel/detail?id='+id
				});
			}
		}
	}
</script>

<style>
.active_red{
	border-bottom: 2px solid #317bf2;
	color: #317bf2;
}
</style>
